<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>self-introdction</title>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
   
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3378436_m0dwm43l0ab.css">

</head>

<body>
    <nav class="navbar">
        <div class="max-width">
            <div class="logo"><a href="#">Welcome <i class="icon iconfont icon-a-gongren_worker2"></i></a></div>
            <ul class="menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>

                <li><a href="#services">demos</a></li>
                <li><a href="#contact">Contact</a></li>

            </ul>
            <div class="menu-btn">
                <i class="icon iconfont icon-classify"></i>
            </div>
        </div>
    </nav>
    <section class="home" id="home">
        <div class="max-width">
            <div class="home-content">

                <div class="text-2">廖妙</div>
                <div class="text-1">软件工程专业</div>
                <div class="text-3">扬州大学广陵学院</div>
                <a href="#">Hire me</a>
            </div>
        </div>
    </section>

    <section class="about" id="about">
        <div class="max-width">
            <h2 class="title">About me</h2>
            <div class="about-content">
                
                <div class="column left">
                    <img src="images/tx.jpg" alt="">
                </div>
                <div class="column right">
                   <div class="text">
  
                    <p>1、熟悉 W3C 标准，HTML-CSS 页面布局，高效还原静态页面，可以根据设计图快速进行页面布局</p>
                    <p> 2、熟悉 HTML5-CSS3，弹性盒子布局、rem，百分比和响应式等主流移动端布局方式，和 less 等预处理 </p>
                    <p>3、熟悉 JavaScript,Axios,JQuery 等相关技术 </p>
                    <p> 4、熟悉使用 Vue 全家桶，Vue-cli+Vue-router+Vuex+axios</p>
                    <p> 5、英语 CET-4 证书 </p>
                    <p> 6、熟悉计算机基础，如 HTTP 协议、TCP/IP 协议等 </p>
                    <p> 7、了解MVVM 模块化开发流程</p>
                   </div>
                    
                </div>
            </div>
        </div>
    </section>
    <section class="services" id="services">
        <div class="max-width">
            <h2 class="title">demos</h2>
            <div class="serv-content">
                <div class="card clock">
                    <div class="box">
                        <i class="icon iconfont icon-xunzhang"></i>
                        <div class="text">clock</div>
                        <p>小时钟</p>
                    </div>
                </div>

                <div class="card mouse">
                    <div class="box">
                        <i class="icon iconfont icon-a-huiyuanhuangguanwangzhevip"></i>
                        <div class="text">poke a mole</div>
                        <p>打地鼠小游戏</p>
                    </div>
                </div>

                <div class="card music">
                    <div class="box">
                        <i class="icon iconfont icon-a-zhengshuzhengming"></i>
                        <div class="text">music </div>
                        <p>音乐播放器</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <div class="max width">
            <h2 class="title">Contact me</h2>
            <div class="contact-content">
                <div class="column left">
                    <div class="text">Get in Touch</div>
                    <p></p>
                    <div class="icons">
                        <div class="row">
                            <i class="icon iconfont icon-xiaoren"></i>
                            <div class="info">
                                <div class="head">Name</div>
                                <div class="sub-title">廖妙</div>

                            </div>
                        </div>

                        <div class="row">
                            <i class="icon iconfont icon-dizhi"></i>
                            <div class="info">
                                <div class="head">Address</div>
                                <div class="sub-title">四川南充</div>

                            </div>
                        </div>
                        <div class="row">
                            <i class="icon iconfont icon-youjian"></i>
                            <div class="info">
                                <div class="head">Email</div>
                                <div class="sub-title">1179450953@qq.com</div>


                            </div>
                        </div>
                        <div class="row">
                            <i class="icon iconfont icon-Telephone"></i>
                            <div class="info">
                                <div class="head">电话</div>
                                <div class="sub-title">15705273842</div>


                            </div>
                        </div>
                    </div>

                </div>
                <div class="column right">
                    <div class="text">Message me</div>
                    <form action="#">
                        <div class="fileds">
                            <div class="filed name">
                                <input type="text" placeholder="name" required>
                            </div>
                            <div class="filed email">
                                <input type="email" placeholder="email" required>
                            </div>
                           <div class="filed textarea">
                               <textarea cols="30" rows="10" placeholder="Describe.." required></textarea>
                           </div>
                           <div class="button">
                               <button type="submit">Send message</button>
                           </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script src="script.js"></script>
</body>

</html>